/**
 * @title 表格
 * @description 单选
 *
 */
import React, { Component } from "react";
import cloneDeep from 'lodash.clonedeep';

import Modal from 'bee-modal';
import 'bee-modal/build/Modal.css';

import { Button, Icon } from "tinper-bee";

import Table from "bee-table";
import 'bee-table/build/Table.css';
import Checkbox from 'bee-checkbox';
import 'bee-checkbox/build/Checkbox.css';
import FormControl from 'bee-form-control';
import 'bee-form-control/build/FormControl.css';
import MyTable from './Table.jsx'

import { vendorsSetStorage, vendorsGetStorage, vendorsDanger, vendorsFmtDate, vendorsGetUrlParam } from 'utils/config.js';
import axios from 'axios';

import './index.less'



class ReferSingleSelect extends Component {
    constructor(props) {
        super(props);
        let _self = this;
        this.state = {
            value: '',
            label: '',
            columns: [],
            selectedList: [],
            reqData: {},
            showModal: false,
            data: [],
            searchData: []
        }
        this.myDebounce = this.debounce(this.changeSearchData)
    }

    onCheckBoxChange = (record, index, callBack) => {
        let e = !record._checked;
        let { searchData, data } = cloneDeep(this.state);
        searchData.map((item, dataIndex) => {
            if (item.pkProject === record.pkProject) {
                item._checked = e;
                item.style = {backgroundColor:'#e3f2fd'}
            } else {
                item.style = {backgroundColor:'#fff'}
                item._checked = false
            }
        })
        data.map((item, dataIndex) => {
            if (item.pkProject === record.pkProject) {
                item.style = {backgroundColor:'#e3f2fd'}
                item._checked = e
            } else {
                item.style = {backgroundColor:'#fff'}
                item._checked = false
            }
        })
        let selectedList = []
        e && (selectedList = [{ ...record, _checked: e }])
        this.setState({
            searchData,
            data,
            selectedList
        }, () => {
            callBack && callBack()
        })
    }
    close = () => {
        this.setState({
            showModal: false
        })
    }

    showGrid = () => {
        let { reqRef, refPk, label, refList, selectedList, reqData } = this.props.refData;
        let newcolumns = this.setColumns(reqRef)
        if (refList.length) {
            this.setState({
                label,
                value: '',
                showModal: true,
                columns: newcolumns,
                data: refList,
                searchData: refList,
                selectedList: selectedList,
                reqData: reqData
            })
        } else {
            this.setState({
                label,
                value: '',
                showModal: true,
                columns: newcolumns,
                data: refList,
                searchData: refList,
                selectedList: selectedList,
                reqData: reqData
            }, () => {
                this.updataRefData(reqRef)
            })
        }
    }
    setColumns = (reqRef) => {
        let _self = this;
        let newcolumns = [
            {
            title: '序号', dataIndex: "_checked", key: "_checked", width: '60',
            render(text, record, index) {
                if (index == 0) {
                 
                }
                let _checked = text ? true : false
                return <div className="ygc-checkbox-cont">
                    {index+1}
                    {/* <Checkbox
                        className="ygc-checkbox"
                        onChange={(e) => { _self.onCheckBoxChange(record, index) }}
                        checked={_checked}
                    /> */}
                </div>
            }
        }
        ]
        //动态设置显示列
        reqRef.setCoByKey.forEach((item, index) => {
            newcolumns.push({ title: item.name, dataIndex: item.key, key: item.key })
        })
        return newcolumns
    }
    updataRefData = (reqRef) => {
        !this.props.loading.getLoadingState() && this.props.loading.setLoadingState(true)
        let dataKey = reqRef.method === "get" ? "params" : 'data'
        axios({
            method: reqRef.method,
            url: reqRef.refUrl,
            [dataKey]: this.state.reqData,
            headers: {
                'Cache-Control': 'no-cache',
            }
        }).then((res) => {
            this.props.loading.setLoadingState(false)
            let data = res.data;
            if (data.resultCode === 'ok') {
                this.setState({
                    data: data.result.objects,
                    searchData: data.result.objects,
                }, () => {
                    this.saveRefData({ isChange: false })
                })
            } else {
                vendorsDanger({ 'text': data.exMsg })
            }
        })
    }
    getSelectedDataFunc = (selectedList, record, index, newData) => {

    };


    getShowValue = () => {

    }

    saveRefData = ({ isChange = true }) => {
        this.props.saveRefData(
            {
                selectedList: this.state.selectedList,
                reqData: this.state.reqData,
                refList: this.state.data
            }, isChange
        )
    }
    sureClick = () => {
        this.setState({
            showModal: false,
        }, () => {
            this.saveRefData({})
        })
    }
    componentDidMount() {

    }
    onRowDoubleClick = (record, index, event) => {
        this.onCheckBoxChange(record, index, this.sureClick)
    }
    onChange = (value) => {

        this.setState({
            value
        }, () => {
           this.myDebounce(value)
        })
    }
    changeSearchData = (value) => {
        let { data } = this.state;
        let searchData = [];
        data.forEach((item) => {
            if (item.sname.indexOf(value) !== -1 || item.scode.indexOf(value) !== -1) {
                searchData.push(item)
            }
        })
        this.setState({
            searchData
        })
    }
    debounce = (fn) => {
        let _self= this
        let timer = null
        return function(value) {
          clearTimeout(timer)
          timer = setTimeout(() => {
            fn.call(_self, value)
          }, 800)
        }
    }
    onRowClick = (record, index, event) => {
        console.log(1111)
        this.onCheckBoxChange(record, index)
    }
    render() {
        return (
            <div id='singSelect'>
                <Modal show={this.state.showModal} size={'lg'} onHide={this.close} backdrop={false}>
                    <Modal.Header closeButton>
                        <Modal.Title > {this.state.label} </Modal.Title>
                    </Modal.Header >
                    <Modal.Body>
                        <div style={{ width: "280px", marginBottom: "10px" }}>
                            <FormControl
                                value={this.state.value}
                                placeholder="项目编码/项目名称"
                                onChange={this.onChange}
                                type="search"
                            />
                        </div>
                        <MyTable
                            columns={this.state.columns}
                            data={this.state.searchData}
                            onRowClick={this.onRowClick}
                            onRowDoubleClick={this.onRowDoubleClick}
                            emptyText={() => '暂无数据'}
                            rowKey={this.setRowKey}
                            scroll={{ y: 380 }}
                        />

                    </Modal.Body>
                    <Modal.Footer>
                        <div className="refer-btn-group">
                            <Button className='icon-cancel-btn' onClick={this.close}> 取消 </Button>
                            <Button colors="primary" onClick={this.sureClick}> 确认 </Button>
                        </div>
                    </Modal.Footer>
                </Modal>
            </div >
        );
    }
}
export default ReferSingleSelect;